<template>
  <view style="height: 100vh; overflow: hidden">
    <uni-nav-bar :title="title" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
    <view class="filling" @click="funType">
      <view>
        <text>{{ FillAll.code }}</text>
        <text>{{ FillAll.imsi }}</text>
        <text>最新更新时间：{{ FillAll.lasttime }}</text>
      </view>
      <view
        @longpress="longpress"
        :class="
          FillAll.run_status == '0'
            ? 'red'
            : FillAll.run_status == '1'
            ? 'green'
            : FillAll.run_status == '-1'
            ? 'grey'
            : ''
        "
      >
        {{
          FillAll.run_status == '1'
            ? '正常'
            : FillAll.run_status == '0'
            ? '异常'
            : FillAll.run_status == '-1'
            ? '停止'
            : ''
        }}
      </view>
    </view>
    <view class="fillCenter" style="overflow: hidden; padding: 6rpx 0px">
      <view class="datas">
        <uni-datetime-picker
          v-model="range"
          type="daterange"
          :border="false"
          :clear-icon="false"
          rangeSeparator="至"
          @change="change"
        />
      </view>
    </view>
    <view class="fillCenter">
      <!-- TODO check -->
      <uni-data-select v-model="level" :localdata="localdata" @change="changeState"></uni-data-select>
    </view>
    <scroll-view
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
      class="scroll-box"
      v-if="fillinDetail.length > 0"
      :style="{ height: pageHeight + 'px' }"
    >
      <view class="details" v-for="(item, index) in fillinDetail" :key="index">
        <view
          :style="{
            background:
              item.level === 1
                ? '#1AA034'
                : item.level === 2
                ? '#FFEC00'
                : item.level === 3
                ? '#FF0013'
                : item.level === 4
                ? '#007AFF'
                : '',
          }"
        ></view>
        <view>
          <text>{{ item.msg }}</text>
          <text>{{ item.createtime }}</text>
        </view>
      </view>
    </scroll-view>
    <view :style="{ height: pageHeight + 'px' }" v-if="fillinDetail.length < 1">
      <!-- TODO -->
      <u-empty text="暂无记录" mode="list"></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { fillDetil, fillingDetail } from '@/gql/fillStatus';
import { navBack, navTo } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { onMounted, ref } from 'vue';

// static
let fillItem = null as number; //加注机
const pageHeight = ref('');
const fillinDetail = ref([]);
const FillAll = ref({});
// data

const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);
const title = ref('');
let lastPage = 1; //总页数
let curPage = 1; //页数

const level = ref(0);
const localdata = [
  {
    text: 'level 1',
    value: 1,
  },
  {
    text: 'level 2',
    value: 2,
  },
  {
    text: 'level 3',
    value: 3,
  },
  {
    text: 'level 4',
    value: 4,
  },
];

onLoad((options) => {
  fillItem = Number.parseInt(options.id);
  filling();
  welfareList();
});

onMounted(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = res.windowHeight - 235;
    },
  });
});

/**
 * 获取加注机详情
 */
function filling() {
  showLoading('加载中...');
  const payload = {
    query: fillingDetail,
    variables: {
      page: curPage,
      fill_id: fillItem,
      start,
      end,
      level: level.value ? level.value : 0,
    },
  };
  toPublish('ql/fill/fillLog', payload, (obj: any) => {
    const { fill_log } = obj.data;
    fillinDetail.value = [...fillinDetail.value, ...fill_log.list];
    lastPage = fill_log.lastpage;
  });
}
/**
 * 获取加注机
 */
function welfareList() {
  const payload = {
    query: fillDetil,
    variables: {
      fill_id: fillItem,
    },
  };
  toPublish('ql/fill/fillInfo', payload, (obj: any) => {
    const { fill_info } = obj.data;
    title.value = fill_info.code + '加注机';
    FillAll.value = fill_info;
  });
}
/**
 * 长按调整对加注机状态检测
 */
function longpress() {
  const title = FillAll.value.is_monitor === 1 ? '是否停止监控' : '是否开启监控';
  uni.showModal({
    title: '温馨提示',
    content: title,
    success(res) {
      if (res.confirm) {
        fillStates();
        setTimeout(() => {
          welfareList();
        }, 1000);
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    },
  });
}
/**
 * 启用停止加注机
 */
function fillStates() {
  const status = FillAll.value.is_monitor === 1 ? 0 : 1;
  const payload = {
    fill_id: FillAll.value.id,
    status,
  };
  toPublish('jzj/editMonitor', payload, () => {
    welfareList();
  });
}
/**
 * 切换日期选择
 */
function change([startFrom, endTo]) {
  start = startFrom;
  end = endTo;
  fillinDetail.value = [];
  curPage = 1;
  filling();
}
/**
 * @param {Object} value  筛选级别
 */
function changeState(value) {
  level.value = value;
  fillinDetail.value = [];
  curPage = 1;
  filling();
}

/**
 * 加载更多
 */
function loadMore() {
  if (curPage < lastPage) {
    curPage++;
    filling();
  }
}
function funType() {
  navTo(`machine/function?id=${FillAll.value.imsi}`);
}
</script>

<style lang="less">
.scroll-box {
  width: 95%;
  border-radius: 5px;
  margin: 0px auto;
  overflow: hidden;
  .details:nth-last-child(1) {
    border: none;
  }
  .details {
    width: 100%;
    padding: 20rpx 20rpx 20rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    view:nth-of-type(1) {
      width: 6rpx;
      height: 46rpx;
      background: #ff0000;
    }
    view:nth-of-type(2) {
      width: 95%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 50rpx;
      }
      text:nth-of-type(1) {
        font-size: 30rpx;
      }
    }
  }
}
.filling {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  border-radius: 5px;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  view:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text:nth-of-type(1) {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }
    text:nth-of-type(3) {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 400;
    }
    text {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 40rpx;
    }
  }
  view:nth-of-type(2) {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
  .green {
    background: linear-gradient(-24deg, #2e8df4, #0db5f0);
    box-shadow: 0rpx 2rpx 23rpx 1rpx rgba(204, 204, 204, 0.3);
  }
  .red {
    background: linear-gradient(-24deg, #ff2b2b, #ff2924);
    box-shadow: 0rpx 2rpx 23rpx 1rpx rgba(204, 204, 204, 0.3);
  }
  .grey {
    background: #999;
    box-shadow: 0rpx 2rpx 23rpx 1rpx rgba(204, 204, 204, 0.3);
  }
}
.fillCenter {
  width: 95%;
  margin: 2.5% auto;
  background-color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  .datas {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  view:nth-of-type(2) {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
</style>
<style>
.datas >>> .uni-input-input {
  font-size: 32rpx;
}
</style>
